<template>
	<view class="content">
		<permissionPopup></permissionPopup>
		<view class="top">
			<!-- <uni-nav-bar title="邀请码" backgroundColor="transparent" :border="false" leftIcon="left"
				@clickLeft="back" fixed></uni-nav-bar> -->
			<view class="box">
				<view class="invited-card">
					<view class="you-invited">
						您的邀请码
					</view>
					<view class="invitation-code">
						{{ invite_code }}
					</view>
					<view class="replication">
						<view class="replication-box">
							<view class="replication-btn" @click="replication">
								我要分享
							</view>
						</view>
					</view>
					<view class="invitation-text">
						{{settingData.value.share_title ?settingData.value.share_title : '扫码一起加入我们吧！~'}}
					</view>
					<view class="QR-code">
						<view class="QR-code-img">
							<uv-qrcode ref="qrcode" canvas-id="qrcode" :value="value" size="300rpx" :loading="loading"
							:options="options"></uv-qrcode>
						</view>
					</view>
					<!-- <view class="nickname">{{memberHome.nick}}</view> -->
					<view class="save" @click="openAuth('WRITE_EXTERNAL_STORAGE')">
						<view class="save-img">
							<u--image :showLoading="true" src="/static/img/save.png" width="100rpx" height="100rpx"></u--image>
						</view>
						<view class="save-text">
							保存此二维码
						</view>
					</view>
				</view>
			</view>
		</view>
			<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
	</view>
</template>

<script>
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	import uvQrcode from '@/uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue';
	export default {
		components: {
			ykAuthpup
		},
		data() {
			return {
				loading: false,
				permissionID:'',
				invite_code: '',
				value: '',
				options: {
					useDynamicSize: false,
					errorCorrectLevel: 'Q',
					margin: 10,
					areaColor: "#fff",
					// 指定二维码前景，一般可在中间放logo
					// foregroundImageSrc: require('static/image/logo.png')
				},
				settingData:{},
				memberHome:{},
			}
		},
		onLoad() {
			this.memberHome=uni.getStorageSync('memberHome')
			this.settingData = uni.getStorageSync('settingData')
			this.$api.getInviteCode().then(res => {
				console.log(res)
				this.invite_code = res.data.invite_code
				this.value = "https://app.fjxmlz.com/htmls/#/pages/registered/registered?invite_code=" + this.invite_code
				this.$nextTick(() => {
					this.$refs.qrcode.remake({
						success: () => {
							console.log('生成成功');
						},
						fail: err => {
							console.log(err)
						}
					});
				})
			})
		},
		methods: {
			//打开自定义权限目的弹框
			openAuth(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpup'].open();
				},500)
			},
			//用户授权权限后的回调
			changeAuth(){
				//这里是权限通过后执行自己的代码逻辑
				this.saveQrcode()
			},
			back() {
				uni.navigateBack()
			},
			saveQrcode(){
				this.$refs.qrcode.toTempFilePath({
						success: res => {
							// console.log(111, res);
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: "图片已保存"
									});
								},
								fail: () => {
									uni.hideLoading();
									uni.showToast({
										icon: 'none',
										title: "图片保存失败"
									});
								}
							});
						}
					});
			},
			replication(){
				let shareData = {
				    href: "https://app.fjxmlz.com/htmls/#/pages/registered/registered?invite_code=" + this.invite_code,
				};
				console.log(shareData);
				plus.share.sendWithSystem(shareData, function(){
				        console.log('分享成功');
				    }, function(e){
				        console.log('分享失败：'+JSON.stringify(e));
				});
				// let href= "https://app.fjxmlz.com/htmls/#/pages/registered/registered?invite_code=" + this.invite_code
				// uni.setClipboardData({ data: href });
			}
		}
	}
</script>

<style scoped lang="scss">
	.top {
		// padding-top: 30rpx
	}

	.content {
		background: url('@/static/img/bg.png') no-repeat;
		background-size: 100% 100%;
		min-height: 100vh;
		z-index: -1;

		.box {
			padding: 30rpx 30rpx;
		}
	}
	.invited-card{
		width: 684rpx;
		height: 1192rpx;
		background: url('@/static/img/invited_bg.png');
		background-size: 100% 100%;
	}
	.invited-card{
		.you-invited{
			padding-top: 80rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #111111;
			line-height: 44rpx;
			text-align: center;
			font-style: normal;
		}
		.invitation-code{
			padding-top: 60rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 90rpx;
			color: #D06122;
			line-height: 126rpx;
			text-align: center;
			font-style: normal;
		}
		.replication{
			display: flex;
			justify-content: center;
			.replication-box{
				width: 590rpx;
				display: flex;
				justify-content: center;
				padding-top: 60rpx;
				padding-bottom: 62rpx;
				border-bottom: 2rpx solid #e2e2e2;;
				.replication-btn{
					width: 200rpx;
					height: 70rpx;
					background: linear-gradient( 270deg, #EA6F29 0%, #FAAA7D 100%);
					border-radius: 16rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 70rpx;
					text-align: center;
					font-style: normal;
				}
			}
		}
		.invitation-text{
			padding-top: 58rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #999999;
			line-height: 44rpx;
			text-align: center;
			font-style: normal;
		}
		.QR-code{
			padding-top: 20rpx;
			display: flex;
			justify-content: center;
			.QR-code-img{
				width: 270rpx;
				height: 270rpx;
			}
		}
		.save{
			padding-top: 60rpx;
			.save-img{
				display: flex;
				justify-content: center;
			}
			.save-text{
				padding-top: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #111111;
				line-height: 44rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}
</style>
